import { FC, useState, useEffect } from 'react';
import { Button, Space, Modal } from 'antd'

import styles from './index.module.less'

const MapOrder: FC = () => {
    const [open, setOpen] = useState(false);
    const [markerArray, setMarkerArray] = useState<{ longitude: string, latitude: string, id: number }[]>([])

    const [Visible, setVisible] = useState(false);
    const [trackAni, setTrackAni] = useState<{
        cancel: () => void,
        pause: () => void,
        continue: () => void
    }>();
    const addMap = () => {
        setOpen(true);
    }
    useEffect(() => {
        if (open) {
            initMap();
        } else {
            // 重置marker
            setMarkerArray([]);
        }
    }, [open]);
    const handleOk = () => {
        console.log(markerArray);
        setOpen(false);
    };

    const handleCancel = () => {
        setOpen(false);
    };
    const initMap = () => {
        const map = new window.BMapGL.Map('markMap'); // 创建Map实例
        map.centerAndZoom(new window.BMapGL.Point(116.404, 39.915), 12);
        map.enableScrollWheelZoom(true);
        var scaleCtrl = new window.BMapGL.ScaleControl();  // 添加比例尺控件
        map.addControl(scaleCtrl);
        var zoomCtrl = new window.BMapGL.ZoomControl();  // 添加缩放控件
        map.addControl(zoomCtrl);
        var cityCtrl = new window.BMapGL.CityListControl();  // 添加城市列表控件
        map.addControl(cityCtrl);

        // 监听点击事件：
        map.addEventListener('click', function (e: any) {
            const latitude = e.latlng.lat;//纬度
            const longitude = e.latlng.lng;//经度
            const marker = new window.BMapGL.Marker(new window.BMapGL.Point(longitude, latitude));


            const id = Math.random();//随机数id
            markerArray.push({ longitude: longitude, latitude: latitude, id: id });
            marker.id = id;

            const markerMenu = new window.BMapGL.ContextMenu();//创建右键菜单
            markerMenu.addItem(new window.BMapGL.MenuItem('删除', function () {
                map.removeOverlay(marker);

                const index = markerArray.findIndex(item => item.id === marker.id);
                markerArray.splice(index, 1);
            }))
            setMarkerArray([...markerArray]);
            marker.addContextMenu(markerMenu);//给marker绑定右键菜单
            map.addOverlay(marker)
        })
    }

    const lookMap = () => {
        setVisible(true);
    }
    const renderMap = () => {
        const bmap = new window.BMapGL.Map("VisibleMap");
        bmap.centerAndZoom(new window.BMapGL.Point(116.297611, 40.047363), 17);
        bmap.enableScrollWheelZoom(true);
        const path = [{
            'lng': 116.297611,
            'lat': 40.047363
        }, {
            'lng': 116.302839,
            'lat': 40.048219
        }, {
            'lng': 116.308301,
            'lat': 40.050566
        }, {
            'lng': 116.305732,
            'lat': 40.054957
        }, {
            'lng': 116.304754,
            'lat': 40.057953
        }, {
            'lng': 116.306487,
            'lat': 40.058312
        }, {
            'lng': 116.307223,
            'lat': 40.056379
        }];
        var point = [];
        for (var i = 0; i < path.length; i++) {
            point.push(new window.BMapGL.Point(path[i].lng, path[i].lat));
        }
        var pl = new window.BMapGL.Polyline(point);
        setTimeout(start, 1000);
        function start() {
            const trackAni = new window.BMapGLLib.TrackAnimation(bmap, pl, {
                overallView: true,
                tilt: 30,
                duration: 20000,
                delay: 300
            });
            trackAni.start();
            setTrackAni(trackAni);
        }
    }
    const pauseAni = () => {
        trackAni?.pause();
    }
    const continueAni = () => {
        trackAni?.continue();
    }
    useEffect(() => {
        if (Visible) {
            renderMap();
        } else {
            // 先把轨迹动画取消
            trackAni?.cancel();
        }
    }, [Visible]);


    return (
        <>
            <div className="container_wrap">
                <div className="base_table">
                    <div className="header_wrap">
                        <div className="action">
                            <Space>
                                <Button type="primary" onClick={addMap}>新增</Button>
                                <Button type="primary" onClick={lookMap}>查看轨迹动画</Button>
                            </Space>
                        </div>
                    </div>
                </div>

                <Modal
                    title="地图打点"
                    width={1100}
                    open={open}
                    onOk={handleOk}
                    onCancel={handleCancel}
                >
                    <div id="markMap" style={{ height: 500 }}></div>
                </Modal>
                <Modal
                    title="地图轨迹"
                    width={1100}
                    open={Visible}
                    onOk={() => {
                        setVisible(false);
                    }}
                    onCancel={() => {
                        setVisible(false);
                    }}
                >
                    <div className={styles.container}>
                        <div id="VisibleMap" style={{ height: 500 }}></div>
                        <ul className={styles.drawing_panel}>
                            <li className={styles.btn} onClick={pauseAni}>暂停</li>
                            <li className={styles.btn} onClick={continueAni}>继续</li>
                        </ul>
                    </div>
                </Modal>
            </div>
        </>
    )
}

export default MapOrder